<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>编辑</title>

  <!-- 导入jquery -->
  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <!-- 导入bootstrap -->
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
  <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
  <!-- 导入art-template -->
  <script src="/node_modules/art-template/lib/template-web.js"></script>
  <style>
    .btn-exit {
        margin-top: 8px;
      }
    </style>
</head>

<body>
  <!-- bootstrap的容器  带版心的-->
  <div class="container">
    <!-- 导航 -->
    <nav class="navbar navbar-default">
      <div class=".container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="#">欢迎进入CQ后台管理</a>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
    <!-- 底部的内容 -->
    <div class="row">
      <!-- 编辑内容 -->
      <div class="col-xs-9">
        <div class="panel panel-default">
          <!-- 标题 -->
          <div class="panel-heading">
            <h3 class="panel-title">
              <!-- 面包屑导航 -->
              <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">英雄管理</a></li>
                <li class="active">英雄列表</li>
              </ol>
            </h3>
          </div>

          <!-- 内容 -->
          <div class="panel-body">
            <form class="form-horizontal ajax-form" id="form">
              <!-- 隐藏域  偷偷的 保存一些数据 不给正常用户看 -->
              <input type="hidden" id="_id" name="_id">
              <div class="form-group">
                <label for="heroName" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                  <input type="text" name="name" class="form-control" id="name" placeholder="姓名">
                </div>
              </div>
              <div class="form-group">
                <label for="skill" class="col-sm-2 control-label">技能</label>
                <div class="col-sm-10">
                  <input type="text" name="skill" class="form-control" id="skill" placeholder="技能">
                </div>
              </div>
              <div class="form-group">
                <label for="icon" class="col-sm-2 control-label">头像</label>
                <div class="col-sm-10">
                  <input type="file" name="icon" class="form-control" id="icon" placeholder="技能">
                  <img class="pre-img" src="" id="iconImg" alt="" width="72px" height="72px">
                </div>
              </div>

              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-success btn-save">保存</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    $(function(){
      // 获取页面传值
      let heroArr = window.name.split(',');
      $('#_id').val(heroArr[0]);
      $('#name').val(heroArr[1]);
      $('#skill').val(heroArr[2]);
      $('#iconImg').attr('src',heroArr[3]);

      // 使用FormData实现文件上传
      $('#form').on('submit', function (e) {
        e = e || window.event;
        e.preventDefault();
        // 创建formData对象 参数是DOM对象
        var formData = new FormData($('form')[0]);

        $.ajax({
          url: '/heroUpdate',
          type: 'post',
          dataType: 'json',
          /* 
            ajax默认请求方式是 application/x-www-form-urlencoded,只能传文本
            将其改成表单默认的属性 multipart/form-data
          */
          contentType: false,
          /* 取消jquery默认的表单序列化 <jQuery特有属性> */
          processData: false,
          data: formData,
          success: function (obj) {
            // console.log(obj);
            if (obj.err_code == 0) {
              location.href = '/';
            } else {
              alert(obj.err_mag)
            }
          }
        })
      })

      // 使用fileRead实现文件预览 + 文件尺寸大小

      // 给input标签注册onchanger事件
      $('#icon').on('change', function () {
        // 创建FileReader对象
        let reader = new FileReader();
        // 开始读取: 异步
        // 如果表单input元素type是file, 当选取文件之后就会有一个files属性获取文件信息
        // console.log(this.files);
        reader.readAsDataURL(this.files[0]);
        let size = this.files[0].size / 1024;

        // 给fileReader注册一个onload事件
        reader.onload = function () {
          // 文件的base64数据
          // console.log(reader.result);
          // 文件预览
          $('#iconImg').attr('src', reader.result);
        }
      })
    })
  </script>
</body>

</html>